<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TrinityManager</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>

<body>
	<div class="container">
		<div class="header">
			<div class="header_big">TrinityManager
			<div class="header_small">Account Management System</div></div>
		</div>
		<div class="main">
			<div class="leftmenu">
				<div class="menu">
				<ul>
					<li> Home
						<ul>
							<li><a href="accounts.html">Accounts</a></li>
							<li><a href="pages.html">Pages</a></li>
						</ul>
					</li>
					<li> Menu 2
						<ul>
							<li><a href="">Item 1</a></li>
							<li><a href="">Item 2</a></li>
						</ul>
					</li>
				</ul>
				</div>
			</div>
			<div class="content center_left">
				<div class="contentbox">
					<div class="contentbox_title">Character Info</div>
					<div class="contentbox_body">
						<ul id="tabnav">
							<li><a href="">Character</a></li>
							<li><a href="reputation" id="tabnav-current">Reputation</a></li>
							<li><a href="skills">Skills</a></li>
							<li><a href="talents">Talents</a></li>
						</ul>
						<div id="tabcontent">
						<!--
							There are different kinds of reputation levels. This is the official table
								exalted: 999
								revered: 21000
								honored: 12000
								friendly: 6000
								neutral: 3000
								unfriendly: 3000
								hostile: 3000
								hated: 36000
							The database doesn't hold levels like "exalted", so you'll have to figure out how to calculate them. 
							bars showing different levels will be be in different colour, so the div classes are going to be:
								bar_good: exalted, revered, honored and friendly
								bar_neutral: neutral
								bar_bad: unfriendly, hostile and hated
							calculate bar width -  style="width:'.(100 * $current_reputation/$max_reputation.'%' "  or something like it
							it should produce something like style="width: 46%"
						-->
						<table class="stats_table">
						<tr><td>Orgrimmar</td><td class="stats_outerbar"> <div class="bar_good stats_bar" style="width:100%"></div><div class="bar_text">Exalted: 999/999<div></td></tr>
						<tr><td>Thunder Bluff</td><td class="stats_outerbar"> <div class="bar_good stats_bar" style="width:65%"></div><div class="bar_text">Revered: 10500/21000</div></td></tr>
						<tr><td>Undercity</td><td class="stats_outerbar"> <div class="bar_good stats_bar" style="width:30%"></div><div class="bar_text">Honored: 4000/12000</div></td></tr>
						<tr><td>Silvermoon</td><td class="stats_outerbar"> <div class="bar_good stats_bar" style="width:75%"></div><div class="bar_text">Friendly: 5000/6000</div></td></tr>
						<tr><td>Shattered Sun Offensive</td><td class="stats_outerbar"> <div class="bar_neutral stats_bar" style="width:65%"></div><div class="bar_text">Neutral: 1700/3000</div></td></tr>
						<tr><td>Timbermaw Hold</td><td class="stats_outerbar"> <div class="bar_bad stats_bar" style="width:70%"></div><div class="bar_text">Unfriendly: 2300/3000</div></td></tr>
						<tr><td>Bloodsail Buccaneers</td><td class="stats_outerbar"> <div class="bar_bad stats_bar" style="width:90%"></div><div class="bar_text">Hostile: 2900/3000</div></td></tr>
						<tr><td>Stormwind</td><td class="stats_outerbar"> <div class="bar_bad stats_bar" style="width:8%"></div><div class="bar_text">Hated: 10000/36000</div></td></tr>
						</div>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div id="clear">
		</div>
		<div class="footer">
			TrinityManager v0.1
		</div>
	</div>
</body>
</html>